<script setup lang="ts">
import { LogoutOutlined } from '@ant-design/icons-vue'
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import * as accountApi from '@/api/account'
import { toYuan, copyToCliboard } from '@/hooks/util'
import { useUserStore } from '@/store/modules/user'
import { message } from 'ant-design-vue'
import Tip from '../Tip/index.vue'
import ServiceModal from '../service-modal/index.vue'
import AddServiceModal from '../Modal/index.vue'
import XiaTong from './common/index.vue'
import { timerFun, destroyTime } from '@/utils/timing'
import { useBrandStore } from '@/store/modules/brand'

const brandStore = useBrandStore()

const count = ref(0) // 徽标数

const userStore = useUserStore()
const router = useRouter()
const activeKey1 = ref('1')
const XiaRef = ref()

const visible1 = ref(false)

const activeKey = ref(1) // 消息通知

const TipRef = ref()
const ServiceModalRef = ref()
const addMoneyModalRef = ref()
const orderNumber = ref('')
const Loading = ref(false)
const btnShow = ref(true)
// let khdLink =
//   'https://pdr-client-download-1323418546.cos.ap-shanghai.myqcloud.com/%E7%A5%A8%E8%BE%BE%E4%BA%BAcrm%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9Fv2.0%E5%AE%A2%E6%88%B7%E7%AB%AF.zip'
// let chupiaoya_khdLink =
//   'https://pdr-client-download-1323418546.cos.ap-shanghai.myqcloud.com/%E8%A7%A6%E7%A5%A8%E9%B8%ADcrm%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9Fv2.0%E5%AE%A2%E6%88%B7%E7%AB%AF.zip'

let ruleSign = ref<string>('USER')
const visible = ref(false)
const setSkmVisible = (value: any) => {
  visible.value = value
}
onMounted(async () => {
  await userStore.getUserInfo()
  ruleSign.value = userStore.userInfo.role

  shows(null)
  timerFun(shows, 2000)()
})
const FormatNumber = computed(() => {
  return userStore.userInfo.userName.slice(0, 3) + '****' + userStore.userInfo.userName.substring(7)
})
const props = withDefaults(defineProps<{ userName: string }>(), {
  userName: () => '...',
})

watch(
  () => ({ ...props }),
  (newVal, oldVal) => {
    // console.log('newVal=', newVal)
  },
)

/** 消息--标签页监听 */
const getChant = (val: any) => {
  XiaRef.value.childMethod(Number(val))
}

/** 获取消息未读总数 */
const shows = async (val: any) => {
  const res = await accountApi.getInfoWeiZon()
  if (res.state == 200) {
    if (
      visible1.value &&
      count.value != res.data &&
      val != '单独已读' &&
      val != '全部已读' &&
      activeKey.value === 1
    ) {
      XiaRef.value.childMethod(activeKey.value)
    }

    count.value = res.data
  }
}

const handleClickChange = (visible1: boolean) => {
  if (!visible1) {
    XiaRef.value.getChild()
  } else {
    setTimeout(() => {
      XiaRef.value.childMethod(activeKey.value)
    }, 100)
  }
}

const logout = () => {
  userStore.logout()

  destroyTime()
  router.push('/login')
}

const systemSet = () => {
  router.push('/account-system')
}

const fundDetail = () => {
  router.push('/fund-detail')
}
const addMoney = () => {}

// 获取账户余额
let balance = ref<string | number>('')
const getBalance = async () => {
  try {
    let { state, data, message: msg } = await accountApi.getUserBalance()
    if (state === 200) {
      balance.value = data.balance
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const change = (e: any) => {
  if (e) {
    getBalance()
  }
}

const goUser = () => {
  router.push('/user-list')
}

const goOrder = () => {
  router.push('/order-manage-list')
}

const goBalance = () => {
  router.push('/assets-manage')
}

const goFinancial = () => {
  router.push('/admin-financial-detail')
}

const goPedigree = () => {
  router.push('/user-pedigree')
}

// 黑名单审核列表
const goBlackList = () => {
  router.push('/user-black')
}

const goUserAccount = () => {
  router.push('/admin-account')
}

const goUserTgZX = () => {
  router.push('/promotion-center')
}

const tgCenter = () => {
  router.push('/promotion-center')
}

const goJfProduct = () => {
  router.push('/integral-product')
}

const ConfirmAddMoney = async () => {
  if (activeKey1.value == '2') {
    activeKey1.value = '1'
    return
  }
  Loading.value = true
  console.log(`AddMoney`)
  if (!orderNumber.value) {
    message.error('支付宝订单号不能为空~')
    Loading.value = false

    return
  }
  try {
    let { state, data, message: msg } = await accountApi.AddMoney({ tradeNo: orderNumber.value })
    if (state === 200) {
      message.success('充值成功~')

      Loading.value = false
      addMoneyModalRef.value.setVisible(false)
    } else {
      message.error(msg)
      Loading.value = false
    }
  } catch (error) {
    console.log(error, 'errorerrorerror')

    message.error('系统错误~')
    Loading.value = false
  }
}

const handleChange = e => {
  console.log(e)
  // if (e == 2) {
  //   btnShow.value = false
  // } else {
  //   btnShow.value = true
  // }
}
</script>

<template>
  <Tip ref="TipRef"></Tip>
  <ServiceModal ref="ServiceModalRef"></ServiceModal>
  <AddServiceModal
    ref="addMoneyModalRef"
    :width="800"
    title="余额充值"
    okText="确认充值"
    @onConfirmAdd="ConfirmAddMoney"
    :Loading="Loading"
    :height="600"
    :btnShow="btnShow"
  >
    <template #contentValue>
      <a-tabs v-model:activeKey="activeKey1" @change="handleChange">
        <a-tab-pane key="1" tab="账户充值">
          <div class="add-money-box">
            <div style="height: 15px"></div>
            <div class="title">
              <a-divider
                type="vertical"
                style="height: 16px; background-color: #5199ff; width: 3px"
              />
              <span style="font-size: 15px">充值说明</span>
            </div>
            <div class="txt-box">
              <div class="txt-item">1. 请使用支付宝app，通过下方收款账号进行转账支付。</div>
              <!-- <div class="txt-item">
                2. 使用支付宝账号
                <span style="background-color: rgb(64, 169, 255, 0.2)">{{ FormatNumber }}</span>
                ,向平台支付宝转账
              </div>
              <div class="txt-item">
                3. 务必使用
                <span style="background-color: rgb(64, 169, 255, 0.2)">{{ FormatNumber }}</span>
                账户转账，使用其他支付宝向平台转账将无法加款
              </div> -->
              <div class="txt-item">
                2. 转帐后填入订单号，确认充值，系统查询到您的转帐记录后会自动加款到您的帐户中。
              </div>
            </div>
            <div style="height: 15px"></div>
            <!-- <a-image
              :width="180"
              src="https://liangpiao-ticket-img.oss-cn-beijing.aliyuncs.com/ticketImg/codepay.png"
            /> -->
            <div class="title">
              <a-divider
                type="vertical"
                style="height: 16px; background-color: #5199ff; width: 3px"
              ></a-divider>

              <span style="font-size: 15px">账号信息</span>
            </div>
            <div class="txt-box">
              <div class="txt-item">
                支付宝名称:
                <span
                  style="font-weight: 700; margin-left: 10px; cursor: pointer"
                  @click="copyToCliboard('河北良票网络科技有限公司')"
                >
                  河北良票网络科技有限公司
                </span>
                <a-button type="link" @click="copyToCliboard('河北良票网络科技有限公司')">
                  复制
                </a-button>
              </div>
              <div class="txt-item">
                支付宝账号:
                <span
                  style="font-weight: 700; margin-left: 10px; cursor: pointer"
                  @click="copyToCliboard('liangpiaogzh@nianchu.net')"
                >
                  liangpiaogzh@nianchu.net
                </span>
                <a-button type="link" @click="copyToCliboard('liangpiaogzh@nianchu.net')">
                  复制
                </a-button>
              </div>
              <!-- <a-image
                :width="150"
                :style="{ display: 'none' }"
                :preview="{
                  visible,
                  onVisibleChange: setSkmVisible,
                }"
                src="https://liangpiao-ticket-img.oss-cn-beijing.aliyuncs.com/ticketImg/pay.jpg"
              /> -->
            </div>
            <div style="height: 15px"></div>
            <div class="title">
              <a-divider
                type="vertical"
                style="height: 16px; background-color: #5199ff; width: 3px"
              />
              <span style="font-size: 15px">充值信息</span>
            </div>
            <div class="add-box">
              <div class="add-item">
                <div class="item-title">票达人账号:</div>
                <div class="value">{{ FormatNumber }}</div>
              </div>
              <div class="add-item">
                <div class="item-title">支付宝订单编号:</div>
                <div class="value">
                  <a-input v-model:value="orderNumber" placeholder="支付宝订单编号" />
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>
        <!-- <a-tab-pane key="2" tab="充值记录" force-render>充值记录</a-tab-pane> -->
      </a-tabs>
    </template>
  </AddServiceModal>

  <div class="main-box">
    <div style="display: flex; align-items: center; margin-right: 5px">
      <a-popover
        placement="bottom"
        trigger="click"
        v-model:open="visible1"
        @openChange="handleClickChange"
      >
        <template #content>
          <a-tabs v-model:activeKey="activeKey" centered @change="getChant">
            <a-tab-pane :key="1" tab="未读消息"></a-tab-pane>
            <a-tab-pane :key="2" tab="已读消息" force-render></a-tab-pane>
          </a-tabs>

          <XiaTong ref="XiaRef" @refreshFu="shows"></XiaTong>
        </template>

        <a-badge :count="count" :offset="[-5, 4]">
          <a-button type="link">
            <template #icon>
              <BellOutlined />
            </template>
          </a-button>
        </a-badge>
      </a-popover>
    </div>

    <a v-if="brandStore.rightTopKfFlag" @click="ServiceModalRef.setVisible(true)">{{ brandStore.kefuText }}</a>

    <a v-if="brandStore.xinRenShiPinFlag" @click="TipRef.showModal(true)">新人视频</a>

    <!-- <span v-if="brandStore.promotionCenter" @click="goUserTgZX" :class="{ active: userStore.nowRouter == '/promotion-center' }">
      推广中心
    </span> -->

    <!-- <div v-if="ruleSign === 'ADMIN'">
      <span @click="goPedigree" :class="{ active: userStore.nowRouter == '/user-pedigree' }">
        用户族谱
      </span>

      <span @click="goBlackList" :class="{ active: userStore.nowRouter == '/user-black' }">
        黑名单审核
      </span>

      <span
        @click="goFinancial"
        :class="{ active: userStore.nowRouter == '/admin-financial-detail' }"
      >
        用户资金明细
      </span>

      <span @click="goUserAccount" :class="{ active: userStore.nowRouter == '/admin-account' }">
        用户平台账号
      </span>

      <span @click="goOrder" :class="{ active: userStore.nowRouter == '/order-manage-list' }">
        用户订单
      </span>

      <span @click="goUser" :class="{ active: userStore.nowRouter == '/user-list' }">用户列表</span>

      <span @click="goBalance" :class="{ active: userStore.nowRouter == '/assets-manage' }">
        资产管理
      </span>

      <span @click="goJfProduct" :class="{ active: userStore.nowRouter == '/integral-product' }">
        积分商品
      </span>
    </div> -->

    <a :href="brandStore.download_client">下载客户端</a>

    <span @click="goBalance" v-if="brandStore.assetsManageFlag" :class="{ active: userStore.nowRouter == '/assets-manage' }">
      资产管理
    </span>

    <a-dropdown @visibleChange="change">
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <div style="color: #40a9ff">
              <b style="margin-left: 5px">账户余额：</b>
              <span>{{ toYuan(Number(balance)) }}</span>
            </div>
          </a-menu-item>
          <a-menu-item @click=";(orderNumber = ''), addMoneyModalRef.setVisible(true)">
            <template #icon>
              <DollarOutlined />
            </template>
            <span>余额充值</span>
          </a-menu-item>
          <a-menu-item @click="fundDetail">
            <template #icon>
              <TransactionOutlined />
            </template>
            <span>资金明细</span>
          </a-menu-item>

          <a-menu-item @click="systemSet">
            <template #icon>
              <SettingOutlined />
            </template>
            <span>账号设置</span>
          </a-menu-item>

          <a-menu-item @click="tgCenter">
            <template #icon>
              <SlackOutlined />
            </template>
            <span>推广中心</span>
          </a-menu-item>

          <a-menu-item @click="logout">
            <template #icon>
              <LogoutOutlined />
            </template>
            <span>退出登录</span>
          </a-menu-item>
        </a-menu>
      </template>
      <span>
        <UserSwitchOutlined />
        {{ userName }}
      </span>
    </a-dropdown>
  </div>
</template>

<style lang="less" scoped>
a,
span {
  margin-right: 8px;
}

.main-box {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  cursor: pointer;
  width: 1080px;
  min-width: 1080px;
  display: flex;
  justify-content: end;
  // border: 1px solid red;
  // background: pink;
}
.add-money-box {
  .title {
    display: flex;
    align-items: center;
  }
  .txt-box {
    padding: 10px;
    .txt-item {
      font-size: 14px;
      margin-top: 5px;
      margin: 20px 0;
    }
  }
  .add-box {
    padding: 10px;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    .add-item {
      font-size: 14px;
      margin-top: 5px;
      display: flex;
      align-items: center;
      .item-title {
      }
      .value {
        flex: 1;
        margin-left: 15px;
      }
    }
    .add-item:nth-child(n + 2) {
      margin-left: 100px;
    }
  }
}

.active {
  color: #40a9ff;
}
</style>
